<template>

    <div class="hometj-content">
        <div class="hometj-content-top">
            <div class="hometj-content-top-left">
                <span class="hometj-content-top-left-span1">推荐技师</span><span
                    class="hometj-content-top-left-span2">人气榜</span>
            </div>
            <div class="hometj-content-top-right">
                <span class="hometj-content-top-right-span">共88位技师<van-icon name="arrow" /></span>
            </div>
        </div>
        <div class="hometj-content-center">
            <div class="hometj-content-center-bodys">
                <div class="hometj-content-center-body" v-for="item in jishiList" :key="item.id">
                    <div class="hometj-content-center-body-image">
                        <van-image class="imagel" fit="fill" :src="item.headImage" />
                    </div>
                    <div class="hometj-content-center-body-name">{{ item.name }} {{ item.score }}</div>
                    <div class="hometj-content-center-body-btn"><van-button style="padding: 0px 20px;" size="mini" round type="primary" @click="yuyue">去预约</van-button></div>
                </div>
            </div>
        </div>
    </div>

</template>

<script setup lang="ts" name="hometj">
import { ref, reactive } from 'vue'
import jishi1 from "@/assets/images/1.webp";
import jishi2 from "@/assets/images/2.jpg";
import jishi3 from "@/assets/images/3.jpg";
import jishi4 from "@/assets/images/4.webp";
import jishi5 from "@/assets/images/5.webp";
import {useRouter} from 'vue-router'

let jishiList = reactive([
    {
        id: "05",
        name: "铁棍",
        headImage: jishi5,
        score: "5.0"
    },
    {
        id: "01",
        name: "刘诗诗",
        headImage: jishi1,
        score: "5.0"
    },
    {
        id: "02",
        name: "张紫叶",
        headImage: jishi2,
        score: "5.0"
    },
    {
        id: "03",
        name: "如花",
        headImage: jishi3,
        score: "5.0"
    },
    {
        id: "04",
        name: "钢炮",
        headImage: jishi4,
        score: "5.0"
    }
])
let Router = useRouter()
function yuyue(){
    Router.push({
        name:"service"
    })
}
</script>

<style scoped>
.hometj-content-center-bodys::-webkit-scrollbar {
  display: none; /* Chrome, Safari和Opera */
}
.hometj-content {
    display: flex;
    flex-direction: column;

    border-radius: 10px;
    /* border:  1px solid red; */
    padding: 5px;
    background: linear-gradient(to right, rgb(244, 245, 245), rgba(172, 57, 166, 0.578));
}

.hometj-content-top {
    display: flex;
    flex-direction: row;
    height: 35px;
    line-height: 35px;

    letter-spacing: 2px;

    .hometj-content-top-left {
        flex: 1;

        .hometj-content-top-left-span1 {
            font-weight: bold;
            font-size: 16px;
            margin-right: 10px;
            font-family: 'Microsoft YaHei', 'Arial', sans-serif;
        }

        .hometj-content-top-left-span2 {
            color: gray;
            font-size: 14px;
        }
    }

    .hometj-content-top-right {
        .hometj-content-top-right-span {
            font-size: 14px;
            color: gray;
            padding-right: 10px;
        }
    }
}

.hometj-content-center {
    margin-top: 5px;
    
    .hometj-content-center-bodys {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        /* 水平滚动条 */
        -webkit-overflow-scrolling: touch;
        /* 针对移动设备优化滚动 */
        -ms-overflow-style: none;
        /* IE 和 Edge */
        scrollbar-width: none;

        /* Firefox */
        .hometj-content-center-body {
            width: 125px;
            height: 170px;
            /* border: 1px solid pink; */
            margin: 2px;
            flex: 0 0 auto;
            /* 防止项目伸缩 */
            background-color: white;
            border-radius: 10px;
            /* border: 1px solid #000; */
            box-shadow: 5px 5px 5px rgba(134, 133, 133, 0.5);

            display: flex;
            flex-direction: column;
            text-align: center;
            padding: 5px;

            .hometj-content-center-body-image {
                height: 110px;

                .imagel {
                    height: 110px;
                }
            }

            .hometj-content-center-body-name {
                height: 20px;
                line-height: 30px;
                font-size: 12px;
            }

            .hometj-content-center-body-btn {

                height: 40px;
                line-height: 40px;
            }
        }
    }
}
</style>